摘要

• 這篇文章的目的是 ?
• React「Styling」分享
• 連結

這篇文章的目的是 ?

在現代的前端開發中，網頁樣式設計是一個不可或缺的部分，它決定了使用者在訪問網站或應用時的視覺體驗。因此，分享關於網頁樣式的知識和技巧至關重要。本文將探討為什麼我們要分享有關樣式的資訊以及一些主要的樣式化方法，包括Styled Components、CSS Modules和Tailwind CSS。這些方法代表了不同的風格和技術，可以根據項目需求和個人偏好來選擇。現在，讓我們深入瞭解這些樣式化方法。

React「Styling」分享

Styled Components（樣式化組件）：

安裝：
首先，為了使用Styled Components，您需要安裝相關的庫。您可以使用npm或yarn進行安裝：

npm install styled-components

或

yarn add styled-components

基本配置：
Styled Components的配置非常簡單。在React應用中使用Styled Components時，只需導入styled-components庫，然後使用它來創建和定義帶有樣式的React組件。您可以使用反引號（``）定義樣式，然後將其應用於組件。Styled Components會自動處理樣式的注入。

以下是一個示例：

import styled from 'styled-components';

const Button = styled.button`
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
`;

function App() {
  return <Button>點擊我</Button>;
}

CSS Modules（CSS模組）：

安裝：
對於CSS Modules，您無需額外安裝庫，它是React的一個內置功能。只需確保您的CSS文件的擴展名為**.module.css**，React將自動將其視為模組。

基本配置：
使用CSS Modules時，只需將樣式文件與組件關聯起來，然後在React組件中導入它們。樣式將以對象的形式返回，您可以在組件的**className**屬性中使用它們，React將自動處理局部作用域。

以下是一個示例：

import styles from './Button.module.css';

function App() {
  return <button className={styles.button}>點擊我</button>;
}

Tailwind CSS（Tailwind樣式）：

安裝：
要使用Tailwind CSS，您需要將其安裝為專案的依賴項。首先，使用npm或yarn安裝tailwindcss和它的相關依賴：

npm install tailwindcssa

或

yarn add tailwindcss

基本配置：
Tailwind CSS提供了一個配置文件（tailwind.config.js），您可以在其中自訂樣式和類名。此外，您需要在專案中創建一個CSS文件，然後引入Tailwind CSS的默認樣式。然後，您可以在React組件中使用Tailwind的類名來應用樣式。確保在開發環境中使用PurgeCSS等工具來優化和刪除未使用的CSS。

以下是一個示例：

function App() {
  return <button className="bg-blue-500 text-white p-2 rounded-lg">點擊我</button>;
}

連結

• React：https://react.dev/